<template>
	<div class="sortS-box">
		<div class="head">
			<!-- 头部 -->
			<TopTab topTabTitle="1"></TopTab>
			<!-- 搜索框 -->
			<router-link  to="/sort">
				<div class="input">
					<p>搜索产品</p>
					<span></span>
				</div>
			</router-link>
			<!-- 筛选 -->
			<ul class="screen-box">
				<li :class="scr.isCheck ? 'screen-list-check' : ''" v-for="(scr, index) in scrList" :key="index" @click="screen(scr.check, index, scr.title)">
					<p>{{ scr.title }}</p>
					<span v-show="index != 0" :class="scr.isCheck ? checkIcon : ''"></span>
				</li>
			</ul>
			<!-- 分类 -->
			<ul class="type-one-box">
				<li v-show="index <= 3" :class="navTwo.isSelect ? 'type-one-check' : ''" @click="check(navTwo, index)" v-for="(navTwo, index) in navOne.navListTwo" :key="index">
					<p>{{ navTwo.isSelect && checkNavTwoInfo != '全部' ? checkNavTwoInfo : navTwo.title }}</p>
					<span></span>
				</li>
			</ul>
			<!-- 筛选框 -->
			<div class="screen-info-box" v-show="showScreen">
				<div class="screen-info">
					<h6>
						<span @click="screenBack"></span>
						筛选
					</h6>
					<div class="screen-info-nav-box">
						<div class="screen-info-nav" v-for="(navTwo, index) in navOne.navListTwo" :key="index">
							<p>{{ navTwo.title }}</p>
							<ul>
								<li
									@click="contentCheck(navTwo.title, content)"
									:class="checkNavTwoInfo == content ? 'screen-info-nav-check' : ''"
									v-for="(content, index) in navTwo.content"
									:key="index"
								>
									{{ content }}
								</li>
							</ul>
						</div>
					</div>
					<!-- 重新选择/确定 -->
					<div class="check-btn">
						<button @click="reselect">重新选择</button>
						<button @click="determine">确定</button>
					</div>
				</div>
			</div>
			<!-- 分类内容 -->
			<div class="type-teo-info" v-show="showNavTwo">
				<p :class="checkNavTwoInfo == navTwoInfo ? 'type-teo-actie' : ''" v-for="(navTwoInfo, index) in navListTwo.content" :key="index" @click="checkNavInfo(navTwoInfo)">
					{{ navTwoInfo }}
				</p>
				<!-- 重新选择/确定 -->
				<div class="check-btn">
					<button @click="reselect">重新选择</button>
					<button @click="determine">确定</button>
				</div>
			</div>
		</div>

		<ul class="goods-info-box">
			<li v-for="goods in goodsList" :key="goods.id" @click="toDetail(goods)">
				<router-link :to="'/detail?goodsId=' + goods.id"><GoodsSub :goods="goods"></GoodsSub></router-link>
			</li>
		</ul>
	</div>
</template>

<script>
import TopTab from '@/components/topTab.vue';
import GoodsSub from '@/components/goodsSub.vue';
export default {
	name: 'sortS',
	data() {
		return {
			typeOneCheck: false,
			checkIcon: '',
			typeParam: {},
			showScreen: false,
			scrList: [
				{
					title: '综合',
					ret: '',
					check: 1,
					isCheck: true
				},
				{
					title: '销量',
					ret: '',
					check: 1,
					isCheck: false
				},
				{
					title: '评价数',
					ret: '',
					check: 1,
					isCheck: false
				},
				{
					title: '价格',
					ret: '',
					isCheck: false,
					check: 1
				},
				{
					title: '筛选',
					ret: '',
					isCheck: false,
					check: 1
				}
			],
			navListTwo: {
				content: []
			},
			showNavTwo: false,
			checkNavTwoInfo: '全部',
			showScreenBox: false,
			navOne: {},
			goodsList: []
		};
	},
	methods: {
		/* 二级分类 */
		check(param, index) {
			// console.log(param,index)
			this.navListTwo = param;
			this.checkNavTwoInfo = '全部';
			this.navOne.navListTwo.forEach((item, i) => {
				if (index == i) {
					item.isSelect = !item.isSelect;
					if (item.isSelect) {
						this.showNavTwo = true;
					} else {
						this.showNavTwo = false;
					}
				} else {
					item.isSelect = false;
				}
			});
		},
		/* 二级分类内容选中 */
		checkNavInfo(navTwoInfo) {
			this.checkNavTwoInfo = navTwoInfo;
		},
		/* 筛选 */
		screen(check, index, title) {
			// console.log(check,index)
			// 判断选中
			this.scrList.forEach((item, i) => {
				if (index == i) {
					item.isCheck = true;
					item.check += 1;
					if (item.check >= 3) {
						item.check = 1;
					}
				} else {
					item.isCheck = false;
					item.check = 1;
				}
			});
			// 选择使用的样式
			switch (check) {
				case 0:
					this.checkIcon = '';
					break;
				case 1:
					this.checkIcon = 'checkBot';
					break;
				case 2:
					this.checkIcon = 'checkTop';
					break;
			}
			switch (title) {
				case '筛选':
					this.showScreen = false;
					break;
				case '销量':
					if (check == 1) {
						this.goodsList.sort(this.down('salesVolume'));
					}
					if (check == 2) {
						this.goodsList.sort(this.up('salesVolume'));
					}
					break;
				case '评价数':
					if (check == 1) {
						this.goodsList.sort(this.down('evaluate'));
					}
					if (check == 2) {
						this.goodsList.sort(this.up('evaluate'));
					}
					break;
				case '价格':
					if (check == 1) {
						this.goodsList.sort(this.down('price'));
					}
					if (check == 2) {
						this.goodsList.sort(this.up('price'));
					}
					break;
			}
			if (title == '筛选') {
				this.showScreen = !this.showScreen;
			}
		},
		/* 降序 */
		down(name) {
			return function(obj1, obj2) {
				let val1 = obj1[name];
				let val2 = obj2[name];
				return val2 - val1;
			};
		},
		/* 升序 */
		up(name) {
			return function(obj1, obj2) {
				let val1 = obj1[name];
				let val2 = obj2[name];
				return val1 - val2;
			};
		},
		/* 筛选 */
		contentCheck(title, content) {
			this.navOne.navListTwo.forEach(item => {
				if (title == item.title) {
					item.isSelect = !item.isSelect;
				} else {
					item.isSelect = false;
				}
			});
			this.checkNavTwoInfo = content;
		},
		/* 筛选框隐藏 */
		screenBack() {
			this.showScreen = false;
		},
		/* 确定 */
		determine() {
			this.navOne.navListTwo.forEach(item => {
				item.isSelect = false;
			});
			this.showNavTwo = false;
			this.showScreen = false;
		},
		/* 重新选择 */
		reselect() {
			this.checkNavTwoInfo = '全部';
		},

		/* 查看详情 */
		toDetail(goods) {
			localStorage.setItem('thisGoods', JSON.stringify(goods));
		}
	},

	/* 实例创建完成 */
	created() {
		// console.log(this.$route.query);
		this.typeParam = this.$route.query;
		/* 请求列表数据 */
		this.axios.get('./json/sortSScre.json').then(res => {
			// console.log(res)
			let navListOne = res.navList.filter(item => {
				return item.title == this.typeParam.typeOne;
			});
			// console.log(this.navListOne)
			this.navOne = navListOne[0];
		});
		/* 请求商品数据 */
		this.axios.get('https://www.fastmock.site/mock/db3aaecafecce7bef237fef166118389/huayu/huayu-sortS-datas').then(res => {
			this.goodsList = res.goodsList.filter(item => {
				return item.typeOne == this.typeParam.typeOne;
			});
			// console.log(this.goodsList)
		});
	},
	mounted() {
		document.querySelector('.screen-info-box').style.height = document.documentElement.clientHeight + 'px';
	},
	components: {
		TopTab,
		GoodsSub
	}
};
</script>

<style scoped="scoped">
@import url('../css/publice.css');
.sortS-box {
	width: 100%;
	background-color: #f3f3f3;
}

.head {
	width: 100%;
	position: fixed;
	top: 0;
}
.head a{
	position: relative;
	z-index: 4;
}

/* input框 */
.input {
	width: 5rem;
	height: 0.7rem;
	background-color: #f3f3f3;
	border-radius: 0.3rem 0.3rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 0.18rem;
	padding-right: 0.2rem;
	position: fixed;
	top: 0.1rem;
	left: 1rem;
}

.input span {
	background: url(../assets/icon5.png) no-repeat -0.06rem -0.05rem;
	width: 0.5rem;
	height: 0.5rem;
	background-size: 2.7rem 1.86rem;
	/* transform: scale(2); */
}

.input p {
	padding-left: 0.1rem;
	font-size: 0.24rem;
}

/* 筛选 */
.screen-box {
	width: 100%;
	height: 0.8rem;
	background-color: white;
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-bottom: #f3f3f3 solid 0.01rem;
}

.screen-box li {
	width: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.screen-box .screen-list-check p {
	color: #ff3333;
}

.screen-box li span {
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-image: url(http://i.huasongwang.com/i/c/icon6.png);
	background-position: -8px -50px;
}

.screen-box li .checkTop {
	background-position: -28px -50px;
}

.screen-box li .checkBot {
	background-position: -48px -50px;
}

.screen-box li:last-child span {
	background-position: -117px -50px;
}

/* 分类 */
.type-one-box {
	width: 100%;
	height: 1.02rem;
	background-color: white;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.type-one-box li {
	width: 1.7rem;
	height: 0.6rem;
	background-color: #f3f3f3;
	border-radius: 0.3rem;
	display: flex;
	justify-content: center;
	padding-top: 0.1rem;
	/* align-items: center; */
}

.type-one-box li p {
	color: #666666;
	font-size: 0.25rem;
}

.type-one-box li span {
	width: 20px;
	height: 20px;
	/* border: #000000 solid 0.01rem; */
	background-repeat: no-repeat;
	background-image: url(http://i.huasongwang.com/i/c/icon6.png);
	background-position: -74px -56px;
}

.type-one-box .type-one-check {
	border-radius: 0.4rem 0.4rem 0 0;
	height: 0.8rem;
	position: relative;
	top: 0.1rem;
}

/* 分类二级导航栏内容 */
.type-teo-info {
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	align-content: space-around;
	position: relative;
	border-radius: 0 0 0.3rem 0.3rem;
	overflow: hidden;
	background-color: #f3f3f3;
}

.type-teo-info p {
	width: 30%;
	height: 1rem;
	line-height: 1rem;
	padding-left: 0.4rem;
}

.type-teo-actie {
	color: #ff3333;
}

.screen-info-box {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: flex-end;
}

.screen-info {
	width: 80%;
	background-color: white;
	height: 100%;
	position: relative;
}

/* 标题 */
.screen-info h6 {
	width: 100%;
	height: 1.12rem;
	line-height: 1.12rem;
	font-size: 0.3rem;
	color: #666666;
	text-align: center;
	position: relative;
	border-bottom: 0.01rem solid #ddd;
}

.screen-info h6 span {
	position: absolute;
	left: 0.1rem;
	top: 0.2rem;
	width: 36px;
	height: 36px;
	background-repeat: no-repeat;
	background-image: url(http://i.huasongwang.com/i/c/icon6.png);
	background-position: -78px 1px;
	background-size: 320%;
}

.screen-info-nav-box {
	width: 100%;
	height: 80%;
	overflow: auto;
}

.screen-info-nav {
	width: 100%;
}

.screen-info-nav p {
	width: 100%;
	height: 0.72rem;
	line-height: 0.72rem;
	padding-left: 0.1rem;
	color: #666666;
}

.screen-info-nav ul {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}

.screen-info-nav ul li {
	width: 1.8rem;
	height: 0.6rem;
	border: 0.01rem solid #ddd;
	margin-left: 2%;
	margin-bottom: 0.2rem;
	text-align: center;
	line-height: 0.6rem;
	color: #666666;
}

.screen-info-nav ul .screen-info-nav-check {
	border: 0.01rem solid #ff2a43;
	color: #ff2a43;
}

/* 确定和重选按钮 */
.check-btn {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 1.1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.check-btn button {
	width: 50%;
	height: 100%;
	border: none;
	text-align: center;
}

.check-btn button:first-child {
	background-color: white;
	color: #000000;
}

.check-btn button:last-child {
	background-color: #ac976b;
	color: white;
}

.goods-info-box {
	width: 100%;
	margin-top: 35%;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	align-content: space-around;
}

.goods-info-box li {
	margin-top: 0.2rem;
	margin-bottom: 0.1rem;
}
</style>
